<template>
  <div class="a">
    <div class="a-wrapper">
      <header>
        <slot name="header"></slot>
        <!-- 我们希望把页头放这里 -->
      </header>
      <main>
        <slot :msg="state.obj"></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, reactive } from 'vue'
export default defineComponent({
  setup(props, context) {
    const msg = ref<string>('我是子内容:')
    const title = ref<string>('子标题:')

    const state: { obj: { [key: string]: string } } = reactive({
      obj: {},
    })

    onMounted(() => {
      context.emit('onClick', msg.value)
      state.obj.msg = msg.value
      state.obj.title = title.value
    })
    return {
      state,
    }
  },
})
</script>
<style>
.a-wrapper {
  height: 200px;
  border: 1px solid #000;
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
}
</style>
